<!-- 路径规划组件 -->
<!-- 操作：面板上选择起点和终点，然后点击进入规划模式，进行路径规划 -->
<!-- 路径规划期间，将禁用图层控制，并将图层隐藏，展示路径规划实体以及规划面板 -->
<!-- 点击离开规划，恢复图层控制，并清除规划的结果，隐藏规划面板 -->
<template>
  <div class="route-design-wrapper">
    <div class="route-design">
      <div class="header">
        <i class="iconfont metro-lujingguihua"></i>
        <span>路径规划</span>
        <button class="start-btn" @click="enterDesign">
          {{ isDesign ? '离开规划模式' : '进入规划模式' }}
        </button>
      </div>
      <div class="content">
        <div>
          <span style="margin-right: 5px">起点:</span>
          <a-cascader
            v-model:value="startStation"
            :options="options"
            placeholder="请输入起点站"
          >
            <template #clearIcon>
              <i class="iconfont metro-close"></i>
            </template>
          </a-cascader>
          <!-- <a-button style="margin-left: 8px" @click="pickStation('origin')">拾取起点站</a-button> -->
        </div>
        <div>
          <span style="margin-right: 5px">终点:</span>
          <a-cascader
            v-model:value="endStation"
            :options="options"
            placeholder="请输入起点站"
            ><template #clearIcon>
              <i class="iconfont metro-close"></i>
            </template>
          </a-cascader>
        </div>
      </div>
    </div>
  </div>
  <!-- 路径规划展示面板 -->
  <PathDesignDisplayCard
    :routeInfo="routeInfo"
    v-if="isDesign"
    :cacheData="cacheData"
  />
</template>

<script setup>
import PathDesignDisplayCard from './PathDesignDisplayCard.vue';
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
import { useLineData } from '@/store';
import { getLinePlan } from '@/api/line.js';
import { message } from 'ant-design-vue';

import { lineColors } from '@/store/staticData.js';

import {
  controlAll,
  chooseLine,
} from '@/cesiumTools/controller/lineController.js';

import { renderStation, renderStationBill, renderLines, changeDisplayBillBoard, flyToDefaultView, removeByCacheData } from '@/cesiumTools/controller/effectController.js';

const lineData = useLineData();
let subLineData = ref();
let viewer;

// 存储下拉列表的数据
let options = ref([]);
const startStation = ref('');
const endStation = ref('');
const isDesign = ref(false);
let cacheData = {
  stationEnts: [],
  lineEnts: [],
  billboards: [],
};
let pathInfo = {};

// 定义每个起点和终点站对应的所有路径
const routeInfo = ref({})

watch([startStation, endStation], async value => {
  //之前是if(isDesign.value),似乎不对
  if(isDesign.value) {
    if (startStation.value.length && endStation.value.length) {
      const data = await getLineData();
      pathInfo = data;
      mapChange();
    }
  }
  
});

const getLineData = async () => {
  console.log(startStation.value)
  console.log(endStation.value)
  const start = startStation.value;
  const end = endStation.value;
  //如果起点和终点都填入了数据，就跑服务，获取路径规划数据
  if (start.length && end.length) {
    let params = {};
    // 从lineData中获取坐标信息
    console.log(start[0], start[1])
    console.log(end[0], end[1])
    params.origin = getPosition(start[0], start[1]); //之前是这样的但是不能用
    params.destination = getPosition(end[0], end[1]);
    console.log(params)
    const { code, data } = await getLinePlan(params);
    console.log(data)
    
  
    if (code === 200) {
      return data;
    } else {
      message.warn('查询不到相关数据');
      return null;
    }
  }
};
const getPosition = (lineName, stationName) => {
  console.log(lineName, stationName)
  let target;
  subLineData.value.forEach(line => {
    if (line.name === lineName) {
      const { stationsList } = line;
      target = stationsList.find(s => s.name === stationName);
    }
  });
  console.log(target)
  if (target) {
    const position = String(Object.values(target.position))
    console.log(position)
    return position;
  }
};

const mapChange = () => {
  // 清除之前的道路规划实体
  removeActiveEnts();
  // 第二步,通过数据，渲染站点与路径
  // 获取到所有的站点与路径，渲染地图效果
  const stations = [];
  const paths = [];
  const route = {
    stations: [],
  };
  // 解构规划好的数据
  const { distance, segments } = pathInfo;
  // 规划线路的距离
  route.distance = distance;
  // 处理换乘站逻辑，每一段线路的末尾，给上换乘type
  segments.forEach((s, sIndex) => {
    // buslines可能为null
    const {
      bus: { buslines },
    } = s;
    if (buslines?.length) {
      const target = buslines[0];
      const color = lineColors[sIndex];
      target.color = color;
      route.stations.push(target);

      buslines.forEach((b, index) => {
        const line = { part: index + 1, partStation: [] };
        const {
          type, // "地铁线路"
          arrival_stop, // { type: 换乘站 }
          departure_stop, // 起点站
          name, // 线路名称(起点-终点)
          polyline, // 线路的所有坐标点
          via_stops, // 途径站
        } = b;
        paths.push({
          name,
          part: index + 1,
          polyline,
        });
        if (type === '地铁线路') {
          // 先加入起点站
          let arrival = arrival_stop;
          let departure = departure_stop;
          // 如果是最后一段线路，为终点站，否则为换乘站
          arrival.type = sIndex === segments.length - 1 ? '终点站' : '换乘站';
          // 如果是第一段线路，为起点站，否则为换乘站
          departure.type = sIndex === 0 ? '起点站' : '换乘站';

          // 将起点站, 途径站, 终点站都加入到一个line的数组中
          line.partStation.push(arrival);
          via_stops.forEach(v => {
            v.type = '途径站';
            line.partStation.push(v);
          });
          line.partStation.push(departure);
          line.name = name;
        }
        stations.push(line);
      });
    }
  });
  console.log(' routeInfo.value = route', route);
  routeInfo.value = route;

  // 第二步，渲染站点以及路径,不走effectController内部缓存
  stations.forEach((station, index) => {
    let color = lineColors[index];
    const { partStation } = station;
    // 添加站点
    partStation.forEach(async p => {
      let { location, name, type } = p;
      name = type === '换乘站' ? name + '(换乘)' : name;
      // 每个站点的经纬度字符串转换为数值型数组
      const positionArr = location.split(',').map(item => Number(item));
      // 站点坐标转换成对象
      const position = { lng: positionArr[0], lat: positionArr[1] };
      // 这里不能走缓存，因为name不一样，会污染后续的功能
      const stationEnt = renderStation(viewer, {
        position,
        name,
        color: type === '换乘站' ? '#e9a526' : color,
      });
      const billboard = await renderStationBill(viewer, {
        position,
        name,
        color: type === '换乘站' ? '#e9a526' : color,
        attr: {
          name,
        },
      });
      // 存放在组件中
      cacheData.stationEnts.push(stationEnt);
      cacheData.billboards.push(billboard);
    });
  });

  // 添加路径
  paths.forEach((path, index) => {
    const color = lineColors[index];
    const {
      polyline: { polyline },
      name,
    } = path;
    let positionList = polyline.split(';');
    positionList = positionList.map((pos, index) => {
      const [lng, lat] = pos.split(',').map(item => Number(item));
      return {
        lng: Number(lng),
        lat: Number(lat),
      };
    });
    const lineEnt = renderLines(viewer, {
      positions: positionList,
      name,
      color,
    });
    cacheData.lineEnts.push(lineEnt);
  });
  flyToDefaultView(viewer);
};

// 进入规划模式
const enterDesign = async () => {
  // 如果pathInfo对象中没有键值对
  if (!Object.keys(pathInfo).length) {
    // 检查是否有起点终点站
    if (startStation.value.length && endStation.value.length) {
      // 如果存在的话，跑服务，填充pathInfo: {"distance": "35347", "segments": []}
      const data = await getLineData();
      pathInfo = data;
    } else {
      message.warn('请先选择起点和终点站点');
      return;
    }
  }
  // 如果处于规划模式，就退出
  if (isDesign.value) {
    leaveRouteDesign();
    return;
  }
  // 进入规划模式第一步，隐藏当前地图上所有的元素
  // 我们直接交给图层控制组件完成这一步
  // lineData.controlAll(false);
  handleAllLineChecked()

  // 第二步，渲染效果
  mapChange();
  isDesign.value = true;
};

// 离开规划模式
const leaveRouteDesign = () => {
  removeActiveEnts();
  controlAll(true, subLineData);
  isDesign.value = false;
  startStation.value = [];
  endStation.value = [];
  pathInfo = {};
  
};
// 删除规划实体
const removeActiveEnts = () => {
  removeByCacheData(viewer, cacheData);
  // removeAllBillboards(viewer)
  // removeAllStations(viewer)
  // removeAllLines(viewer)
  cacheData.billboards = [];
  cacheData.lineEnts = [];
  cacheData.stationEnts = [];
};

onMounted(() => {
  //渲染下拉列表的数据
  viewer = lineData.Viewer;
  subLineData.value = lineData.allData;
  if (subLineData.value.length > 0) {
    options.value = subLineData.value.map(item => {
      const { name, stationsList } = item;
      //console.log(name, stationsList);
      const children = stationsList.map(s => ({
        value: s.name,
        label: s.name,
      }));
      return {
        label: name,
        value: name,
        children,
      };
    });
  }
});
onBeforeUnmount(() => {
  removeActiveEnts()
  // 组件销毁时，退出规划模式
  cacheData.billboards = [];
  cacheData.lineEnts = [];
  cacheData.stationEnts = [];
});


//控制全部显示或者隐藏
const handleAllLineChecked = () => {
  //为true时显示所有线路和popup，为false时隐藏所有线路和popup
  controlAll(false, subLineData);
  let names = [];
  subLineData.value.forEach(line => {
    const { stationsList } = line;
    //console.log(stationsList)
    stationsList.forEach(station => {
      names.push(station.name);
    });
  });
  //console.log(names);
  //changeDisplayBillBoard(names, false);
};
</script>

<style scoped>
/* 路径规划样式 */
.route-design-wrapper {
  position: absolute;
  right: 14%;
  top: 5%;
  z-index: 1022;
}

.route-design {
  width: 320px;
  height: 170px;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid #885f12;
}

.route-design > .header {
  width: 100%;
  height: 40px;
  color: #fff;
  padding-left: 10px;
  background: rgb(255, 255, 255);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 9%,
    rgba(211, 156, 50, 1) 57%
  );
  background-clip: text; 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
}

.route-design span {
  margin-left: 5px;
}

.content {
  width: 100%;
  height: 110px;
  pointer-events: all;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  color: #fff;
}

.start-btn {
  width: 80px;
  color: #fff;
  margin-left: 140px;
  background-color: transparent;
  border: 1px solid #885f12;
  font-size: 12px;
  padding: 3px;
  pointer-events: all;
  cursor: pointer;
}

.start-btn:hover {
  background-color: #5c3f096d;
  border: 1px solid #881212;
}
</style>
